<template>
  <div id="good">
    <ul class="goodlist">
  
  
      
  <li class="goods" v-for="(item,index) in goodslist" :key=index @click="todetails(index)">

    <img :src="item.img" alt="">
      <p>{{item.goods_name}}</p>
      <p class="goodfont"><span class="goodfont1"><i class="el-icon-coin"></i>{{item.cos}}</span><span  class="goodfont2">剩余：{{item.extra}}个</span></p>

    </li>   
    
    
    </ul>
      
  </div>
</template>

<script>


export default {
  data:function() {
    return{
     goodslist:[],
     
     
     
    }
    
  },
  components:{
         
  },
  methods:{
    todetails:function (index) {
       this.$router.push({  
            path: '/Details',   
            name: 'Details',  
            params: {   
              
                indexs:index,
                goodslist:this.goodslist

            }  
            
        })  

      
    }
    
  },

  mounted: function () { 
     this.$http.get('/api/users/goods').then(({
                    data,
                    config
                }) =>{
                    //解构语法
                  
                    this.goodslist=data.data
                })
    
      
    }
}
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.goodfont{
  margin-top: 5px;
}
.goodfont1{
   font-size: 40px;
   color: orange;
}
.goodfont2{
   font-size: 5px;
   float:right;
   margin-top: 20px;  
}


.goods img{
  width: 98%;
}
.goods{
  width: 44%;
  list-style-type: none;
  border: 1px solid rgb(202, 193, 193);
  border-radius: 10px;
  padding:10px 10px 10px 10px;
  margin: 10px 10px 10px 10px;
  display: inline-block;
  

}



</style>>

